/**
 * Created by huotaol on 2017/4/27.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../common/style/CustomStyle";

export default class MineItem extends Component {
    static propTypes = {
        imageUri: PropTypes.any,
        title: PropTypes.string,
        showArrow: PropTypes.bool,
        click: PropTypes.func,
        rightText: PropTypes.string,
    };
    static defaultProps = {
        showArrow: true,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._renderImage = this._renderImage.bind(this);
    }

    render() {
        console.log('rightTex ' + this.props.rightText);
        return (
            <TouchableOpacity
                onPress={this.props.click}
                style={[this.props.style, {}]}>
                <View
                    style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        height: CustomStyle.getActualSizeInVertical(100),
                        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
                        paddingRight: CustomStyle.getActualSizeInHorizontal(20),
                    }}
                >
                    <View style={{flexDirection: 'row', flex: 1, alignItems: 'center'}}>
                        {this._renderImage()}
                        <Text
                            style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(30),
                                color: '#bc7a44',
                                marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                            }]}>{this.props.title}</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center',}}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(30),
                            color: '#d3ca80',
                        }]}>{this.props.rightText}</Text>
                        {this._renderRightArrow(this.props.showArrow)}
                    </View>
                </View>
                <View
                    style={{height: CustomStyle.getActualSizeInVertical(1), backgroundColor: 'rgba(255,192,0,0.4)',}}/>
            </TouchableOpacity>
        );
    }

    _renderRightArrow(render) {
        if (render === true) {
            const arrow = require('../../img/mine/mine_arrow.png');
            return <Image source={arrow} resizeMode='contain' style={{
                height: CustomStyle.getActualSizeInVertical(28),
                width: CustomStyle.getActualSizeInHorizontal(16),
            }}/>;
        }
    }

    _renderImage() {
        const image = this.props.imageUri;
        if (image) {
            return <Image
                resizeMode='contain'
                source={image}
                style={{
                    width: CustomStyle.getActualSizeInHorizontal(52),
                    height: CustomStyle.getActualSizeInVertical(52),
                }}/>;
        }
    }

}


